/*
 * @Author: 哈兰德
 * @Description: 活动主store
 */
import Vue from 'vue'
const state = () => ({
  // 页面结构描述，会保存到数据库
  pageContent: {
    retainCouponList:[],
    retainPopState:false,
    showCouponPop:false,
    couponPopList:[],
    activityStatus: 1,
    startTime: null,
    endTime: null,
    published: 1,
    ddtype: '1',
    ddUrlList: [],
    title: '',
    pageDot: '',
    atmosphere: false,
    atmosRadio: 'BigPromotion',
    valueAtmos: 1,
    isShare: false,
    isStick: false,
    headerStyle: 1,
    // noNav:false,
    showRule: false,
    ruleText: '',
    ruleButton: {
      show: false,
      text: '',
      rule: {}
    },
    background: {
      bgType: 1,
      bgStartColor: '',
      bgEndColor: '',
      bgMidColor: null,
      bgStartPosition: 0,
      bgMidPosition: 50,
      bgEndPosition: 100,
    },
    componentList: [],
    clientAlwaysRender:false
  },
  // 组件的业务数据，用组件ID关联
  bizData:{},
  selectedComponent: {},
  selectedConfigBlock:3,
  isSaving: false,
  swipeBackTag:true
}) 

const getters = {
  pageContent: state => state.pageContent,
  bizData: state => state.bizData,
  selectedComponent: state => state.selectedComponent,
  selectedConfigBlock: state => state.selectedConfigBlock,
  isSaving: state => state.isSaving,
  swipeBackTag:state => state.swipeBackTag,
  retainPopState:state => state.retainPopState
}

const mutations = {
  editBizData (state, editModel) {
    let model = state.bizData
    // 组件ID作为key
    Vue.set(model, editModel._id, editModel.value)
  },
  setIsSaving (state, isSaving) {
    state.isSaving = isSaving
  },
  setSwipeBackTag (state, value) {
    state.swipeBackTag = value
  },
  resetPage (state) {
    state.pageContent = {
      retainCouponList:[],
      retainPopState:false,
      showCouponPop:false,
      couponPopList:[],
      activityStatus: 1,
      startTime: null,
      endTime: null,
      published: 1,
      title: '',
      pageDot: '',
      atmosphere: false,
      atmosRadio: 'BigPromotion',
      valueAtmos: 1,
      ruleButton: {
        show: false,
        text: '',
        rule: {}
      },
      background: {
        bgType: 1,
        bgStartColor: '',
        bgEndColor: '',
        bgMidColor: null,
        bgStartPosition: 0,
        bgMidPosition: 50,
        bgEndPosition: 100,
      },
      componentList: []

    }
    state.selectedComponent = {}
  },
  editPage (state, editModel) {
    if (editModel.field.indexOf('.') >= 0) {
      // 链式修改子属性
      let arr = editModel.field.split('.')
      let f = arr[arr.length - 1]
      let fuc = new Function('state', 'return  state.pageContent.' + arr.splice(0, arr.length - 1).join('.'))
      let model = fuc(state)
      Vue.set(model, f, editModel.value)
    } else {
      // 修改pageContent一级属性
      let model = state.pageContent
      Vue.set(model, editModel.field, editModel.value)
    }
  },
  editComponent (state, editModel) {
    let model = state.pageContent.componentList.find(a => a._id === editModel._id)
    model && Vue.set(model, editModel.field, editModel.value)
  },
  updateChildListModelField (state, editModel) {
    let model = state.pageContent.componentList.find(a => a._id === editModel._id)
    if (!model) return
    let list = model[editModel.field]
    let child = list.find(a => a._id === editModel.childId)
    child[editModel.childField] = editModel.value
  },
  addComponentListItem (state, editModel) {
    let model = state.pageContent.componentList.find(a => a._id === editModel._id)
    model && model[editModel.field].push(editModel.value)
  },
  editComponentListItem (state, editModel) {
    let model = state.pageContent.componentList.find(a => a._id === editModel._id)
    model && (model[editModel.field][editModel.index] = editModel.value)
  },
  removeComponentListField (state, editModel) {
    let model = state.pageContent.componentList.find(a => a._id === editModel._id)
    if (!model) return
    let index = editModel.value
    model[editModel.field].splice(index, 1)
  },
  addComponent (state, content) {
    let model = state.pageContent.componentList.find(a => a._id === content._id)
    if (model) return
    state.pageContent.componentList.push(content)
    state.selectedComponent = content
    state.selectedConfigBlock=1
  },
  removeComponent (state, index) {
    state.pageContent.componentList.splice(index, 1)
    state.selectedComponent = {}
  },
  clearComponent (state) {
    state.pageContent.componentList = []
    state.selectedComponent = {}
  },
  selectComponent (state, item) {
    state.selectedComponent = item
    state.selectedConfigBlock=1
  },
  chooseComponent (state, item) {
    state.selectedComponent = item
  },
  changeSelectedConfigBlock (state, item) {
    state.selectedConfigBlock=item
  },
  setPageContent (state, content) {
    state.pageContent = content
  },

  // ============nuxt===========
  showAllComponents (state) {
    state.pageContent.componentList.forEach(element => {
      Vue.set(element, 'ruleVisible', true)
    })
  },
  setComponentVisible (state,{ id,visible }) {
    let model = state.pageContent.componentList.find(a => a._id === id)
    model && Vue.set(model, 'ruleVisible', visible)
  },
  setQueryRuleTag (state,{ id,tag }) {
    let model = state.pageContent.componentList.find(a => a._id === id)
    model && Vue.set(model, 'queryRuleTag', tag)
  },
  setComponentRuleContens (state,{ id,arr }) {
    let model = state.pageContent.componentList.find(a => a._id === id)
    model && Vue.set(model, 'ruleContents', arr)
  },
  hideComponents (state,list) {
    list.forEach(element => {
      let model = state.pageContent.componentList.find(a => a._id === element)
      model && Vue.set(model, 'ruleVisible', false)
    })
  }
}

const actions={
  
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
